<template>
    <div style="width: 1300px">
        <player ref="player" style="width: 960px;float: left" :vid="video.vid" :name="video.name" :next="next"></player>
        <div class="video-list">
            <div class="navigation">
                <h3>视频选集</h3>
                <div class="serial-number">{{resource.select + 1}}/{{resource.list.length}}</div>
            </div>
            <ul>
                <template v-for="(video, index) in resource.list" >
                    <li style="cursor: pointer" @click="goto(index)" :class="resource.select === index?'active':''">
                        <i class="iconfont icon-play" v-show="resource.select === index"></i>
                        &nbsp;
                        P{{index + 1}}&nbsp;&nbsp;&nbsp;{{video.name}}
                    </li>
                    <!--<hr>-->
                </template>
            </ul>
        </div>
    </div>
</template>

<script>
    'use strict';

    import player from './player/Player';
    import {baseUtil} from "../common/js/BaseUtil";

    export default {
        name: "Live",
        components: {player},
        props: {},
        data() {
            return {
                baseUtil: baseUtil,
                baseData: baseUtil.getBaseData(),

                resource: {
                    map: {},
                    list: [
                        {vid: 1, name: '视频1', path: 'http://127.0.0.1:18080/file/video_demo.mp4'},
                        {vid: 2, name: '视频2', path: 'http://127.0.0.1:18080/file/video_demo2.mp4'},
                        {vid: 3, name: '视频3', path: 'http://127.0.0.1:18080/file/video_demo2.mp4'},
                        {vid: 4, name: '视频4', path: 'http://127.0.0.1:18080/file/video_demo2.mp4'},
                        {vid: 5, name: '视频5', path: 'http://127.0.0.1:18080/file/video_demo2.mp4'},
                        {vid: 6, name: '视频6', path: 'http://127.0.0.1:18080/file/video_demo2.mp4'},
                    ],
                    select: 0,
                },

                video: {
                    src: '',
                    name: '',
                    id: 0,
                    vid: 0,
                    // hasNext: false
                },

            }
        },
        computed: {},
        methods: {
            /**
             * 初始化资源
             */
            initResource() {
                let tempList = [];
                if(!this.resource.list instanceof Array) {
                    tempList.push(this.resource.list);
                }else {
                    tempList = this.resource.list;
                }
                let list = [];
                let nextVideo = null;
                let tempMap = {};
                // 倒序排确定下一个视频
                tempList.forEach((video, index) => {
                    if((video.src || video.path) && (video.name || video.title) && (video.vid || video.id)) {
                        // 创建对象
                        let map = {
                            src: video.src || video.path,
                            name: video.name || video.title,
                            vid: video.vid || video.id,
                            index: index,
                        };
                        nextVideo = map;
                        list.push(map);
                        tempMap[index] = map;
                    }
                });
                this.resource.list = list;
                // 获取第i个视频
                this.resource.map = tempMap;
                if(list.length === 0) {
                    return;
                }
                // 获取最后一个资源
                this.video = this.resource.map[0];
                this.$refs.player.initVideo(this.video.vid);
            },
            /**
             * 播放下一p
             */
            next() {
                // if(this.video.hasNext) {
                //     let index = this.video.nextIndex;
                //     this.goto(index);
                // }
            },
            /**
             * 播放指定P
             * @param index
             */
            goto(index = 0) {
                this.resource.select = index;
                this.video = this.resource.map[index];
                this.$refs.player.initVideo(this.video.vid);
            }
        },
        created() {
        },
        mounted() {
            this.initResource();
        }
    }
</script>

<style lang="scss" scoped>

    @import '../common/css/theme.sass';

    .video-list{
        width: 300px;
        float: left;
        margin: 10px;
        padding: 10px 10px 0;

        background-color: #f4f4f4;

        &>.navigation{

            *{
                display: inline-block;
                margin: 0 10px;
            }

            .serial-number{
                float: right;
            }

        }

        &>ul{
            list-style: none;
            margin: 10px 0 5px;
            padding: 5px 5px 2px;

            &>li{

                margin: 1px 0;
                padding: 5px 10px;
                border-radius: 2px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                transition: background-color 0.2s, color 0.2s;

                &:hover{
                    background-color: #fff;
                }

                &.active{
                    color: $themeColor;
                    background-color: #fff;
                }


            }

        }


    }

</style>
